<template>
  <div class="container swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slide-container">
          <div class="slide-list">1-1</div>
          <div class="slide-list">1-2</div>
          <div class="slide-list">1-3</div>
          <div class="slide-list">1-4</div>
          <div class="slide-list">1-5</div>
          <div class="slide-list">1-6</div>
          <div class="slide-list">1-7</div>
          <div class="slide-list">1-8</div>
          <div class="slide-list">1-9</div>
          <div class="slide-list">1-10</div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-container">
          <div class="slide-list">2-1</div>
          <div class="slide-list">2-2</div>
          <div class="slide-list">2-3</div>
          <div class="slide-list">2-4</div>
          <div class="slide-list">2-5</div>
          <div class="slide-list">2-6</div>
          <div class="slide-list">2-7</div>
          <div class="slide-list">2-8</div>
          <div class="slide-list">2-9</div>
          <div class="slide-list">2-10</div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-container">
          <div class="slide-list">3-1</div>
          <div class="slide-list">3-2</div>
          <div class="slide-list">3-3</div>
          <div class="slide-list">3-4</div>
          <div class="slide-list">3-5</div>
          <div class="slide-list">3-6</div>
          <div class="slide-list">3-7</div>
          <div class="slide-list">3-8</div>
          <div class="slide-list">3-9</div>
          <div class="slide-list">3-10</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Swiper from "swiper";
import { defineComponent, ref, onMounted } from "vue";

export default defineComponent({
  name: "App",
  components: {},
  setup() {
    let slideIndex = ref(0);
    let swiper: Swiper;

    let run = (e: TouchEvent) => {
      let parent = document.querySelector('.swiper-wrapper') as HTMLElement;
      let container = document.querySelector('.swiper-slide-active .slide-container') as HTMLElement;
      if (container?.scrollTop === 0 && slideIndex.value > 0) {
        slideIndex.value --;
        swiper.slideTo(slideIndex.value);
      }

      if (container.scrollTop && slideIndex.value < 2) {
        // 解决UC等特殊浏览器计算bug
        if ((Math.round(container?.scrollTop + parent.offsetHeight) === container.scrollHeight) || (Math.floor(container?.scrollTop + parent.offsetHeight) === container.scrollHeight)) {
          slideIndex.value ++;
          swiper.slideTo(slideIndex.value);
          container.scrollTop = 0;
        }
      }
    };

    // 判断上一页 下一页加载
    document.addEventListener('touchcancel', (e) => {
      run(e);
    }, false);
    document.addEventListener('touchend', (e) => {
      run(e);
    }, false);

    // dom挂载完成后 初始化swiper
    onMounted(() => {
      swiper = new Swiper(".swiper-container", {
        direction: "vertical",
        freeMode: true,
        noSwipingClass: "slide-container", // 固定swiper，让页面可以自动滚动
      });
    });

    return {};
  },
});
</script>

<style scoped>

.container {
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
}
.slide-container {
  overflow-y: auto;
  height: 100%;
}
.slide-list {
  padding: 40px 0;
}
.slide-list:nth-child(even) {
  background: burlywood;
}
</style>
